<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>专辑库 - QQ音乐</title>
		<link rel="stylesheet" href="styles/music.css" />
	</head>
	<body>
		<header>
			<div class="header-inner">
				<img src="imgs/qqmusic.png" />
			</div>
		</header>
		<main>
			<!-- 歌单推荐部分 -->
			<div class="tag-header">
				<span class="tag-title">歌单推荐</span>
				<nav>
					<a class="tt-active">为你推荐</a>
					<a>运动</a>
					<a>网络歌曲</a>
					<a>思念</a>
					<a>官方歌单</a>
					<a>情歌</a>
				</nav>
			</div>

			<!-- 横向滚动歌单 -->
			<div class="recommend-playlist">
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">向宿命挥拳的人</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">阿云嘎</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000kxqtN0ddCpU_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">说得到做得到</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">胡海泉</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001RNYYW0rHuPV_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">不在见</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">象乐队</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002R4DOj26Q61A_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">长安车马慢</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">优秀少年 (GOOD BOYS)</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003jwWjV32HJIL_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">纸鸢</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">一条小团团ovo</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
			</div>

			<!-- 新歌首发部分 -->
			<div class="tag-list">
				<span class="tag-title">新歌首发</span>
				<nav>
					
					
					<a href="#" class="tag-item tag-active">内地</a>
					<a href="#" class="tag-item">港台</a>
					<a href="#" class="tag-item">欧美</a>
					<a href="#" class="tag-item">韩国</a>
					<a href="#" class="tag-item">日本</a>
					<a href="#" class="tag-item">其他</a>
				</nav>
			</div>
			
			<a href="#" class="inline-play-all" aria-label="播放全部">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<path d="M8 5v14l11-7L8 5z" fill="currentColor"/>
				</svg>
				<span>播放全部</span>
			</a>
			<div class="mid-playlist">
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000005wEOc07Udwu_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">软肋</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">李宇春</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hB9KF0JcCBM_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>

					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">鸳鸯海棠</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">张晓涵</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001aaIDw2ZOiW3_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">幻蝶</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">安沫英</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000dcpok0A8RP3_2.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">花好月圆</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">周迅</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001YIxlA4gQCEn_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">九尾</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">戴荃</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002gMEz44d5sFf_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">记忆停留</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">蓝心羽</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000JYXBc1g7AxL_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">回声</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">那英</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000Ve7fh4Rt9ab_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">醒</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">Mikann耙耙柑</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003vGHeb105WPr_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div class="media">
						<div>
							<a href="#" class="nowrap album-title">姐姐妹妹站起来</a>
						</div>
						<div>
							<a href="#" class="nowrap album-author">马丽</a>
						</div>
						<div class="nowrap album-time">2021-04-16</div>
					</div>
				</div>
			</div>

			<div class="tag-list">
				<span class="tag-title">MV</span>
				<nav>
					<a href="#" class="tag-item tag-active">内地</a>
					<a href="#" class="tag-item">港台</a>
					<a href="#" class="tag-item">欧美</a>
					<a href="#" class="tag-item">韩国</a>
					<a href="#" class="tag-item">日本</a>
					<a href="#" class="tag-item">其他</a>
				</nav>
			</div>
			<div class="final-playlist">
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003LyaIF13Qvfn_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">不是你的我的我</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">VOGUE 5</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M00000404rBw2zdaAR_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">怪我</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">崔子格</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000004ahwy74cpGbM_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">孤独者的旁白</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">王野</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000EEzCA3JIuRX_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">醉仙游</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">小魂</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
				<div class="album">
					<a href="#" class="cover-wrap">
						<img
							src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002TAkS934JbdH_1.jpg"
							class="cover-img"
						/>
						<div class="cover-mask"></div>
						<img src="imgs/cover_play.png" class="cover-play" />
					</a>
					<div>
						<a href="#" class="nowrap album-title">我要谢谢你</a>
					</div>
					<div>
						<a href="#" class="nowrap album-author">余超颖</a>
					</div>
					<div class="nowrap album-time">2021-04-16</div>
				</div>
			</div>
			<div class="page">
				<a href="#" class="page-item page-current">1</a>
				<a href="#" class="page-item">2</a>
				<a href="#" class="page-item">3</a>
				<a href="#" class="page-item">4</a>
				<span class="page-item page-more">...</span>
				<a href="#" class="page-item">1344</a>
				<a href="#" class="page-item">&gt;</a>
			</div>
		</main>
		<footer></footer>
	</body>
</html>
